<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fixed效果</title>
</head>
<body>
    <div class="top">置顶</div>
    <div class="bottom">置底</div>
    <div class="left">左侧边</div>
    <div class="right">右侧边</div>
    <div class="scroll">1</div>
    <div class="scroll">2</div>
    <div class="scroll">3</div>
    <div class="scroll">4</div>
    <div class="scroll">5</div>
    <div class="scroll">6</div>
    <div class="scroll">7</div>
    <div class="scroll">8</div>
    <div class="scroll">9</div>
    <div class="scroll">10</div>
    <div class="scroll">11</div>
    <div class="scroll">12</div>
    <div class="scroll">13</div>
    <div class="scroll">14</div>
    <div class="scroll">15</div>
    <div class="scroll">16</div>
    <div class="scroll">17</div>
    <div class="scroll">18</div>
    <div class="scroll">19</div>
    <div class="scroll">20</div>
    <div class="scroll">21</div>
    <div class="scroll">22</div>
    <div class="scroll">23</div>
    <div class="scroll">24</div>
    <div class="scroll">25</div>
    <div class="scroll">26</div>
    <div class="scroll">27</div>
    <div class="scroll">28</div>
    <div class="scroll">29</div>
    <div class="scroll">30</div>
    <div class="scroll">31</div>
    <div class="scroll">32</div>
    <div class="scroll">33</div>
    <div class="scroll">34</div>
    <div class="scroll">35</div>
    <div class="scroll">36</div>
    <div class="scroll">37</div>
    <div class="scroll">38</div>
    <div class="scroll">39</div>
    <div class="scroll">40</div>
    <div class="scroll">41</div>
    <div class="scroll">42</div>
    <div class="scroll">43</div>
    <div class="scroll">44</div>
    <div class="scroll">45</div>
    <div class="scroll">46</div>
    <div class="scroll">47</div>
    <div class="scroll">48</div>
    <div class="scroll">49</div>
    <div class="scroll">50</div>
    <div class="scroll">51</div>
    <div class="scroll">52</div>
    <div class="scroll">53</div>
    <div class="scroll">54</div>
    <div class="scroll">55</div>
    <div class="scroll">56</div>
    <div class="scroll">57</div>
    <div class="scroll">58</div>
    <div class="scroll">59</div>
    <div class="scroll">60</div>
    <div class="scroll">61</div>
    <div class="scroll">62</div>
    <div class="scroll">63</div>
    <div class="scroll">64</div>
    <div class="scroll">65</div>
    <div class="scroll">66</div>
    <div class="scroll">67</div>
    <div class="scroll">68</div>
    <div class="scroll">69</div>
    <div class="scroll">70</div>
    <div class="scroll">71</div>
    <div class="scroll">72</div>
    <div class="scroll">73</div>
    <div class="scroll">74</div>
    <div class="scroll">75</div>
    <div class="scroll">76</div>
    <div class="scroll">77</div>
    <div class="scroll">78</div>
    <div class="scroll">79</div>
    <div class="scroll">80</div>
    <div class="scroll">81</div>
    <div class="scroll">82</div>
    <div class="scroll">83</div>
    <div class="scroll">84</div>
    <div class="scroll">85</div>
    <div class="scroll">86</div>
    <div class="scroll">87</div>
    <div class="scroll">88</div>
    <div class="scroll">89</div>
    <div class="scroll">90</div>
    <div class="scroll">91</div>
    <div class="scroll">92</div>
    <div class="scroll">93</div>
    <div class="scroll">94</div>
    <div class="scroll">95</div>
    <div class="scroll">96</div>
    <div class="scroll">97</div>
    <div class="scroll">98</div>
    <div class="scroll">99</div>
    <div class="scroll">100</div>
    <div class="scroll">101</div>
    <div class="scroll">102</div>
    <div class="scroll">103</div>
    <div class="scroll">104</div>
    <div class="scroll">105</div>
    <div class="scroll">106</div>
    <div class="scroll">107</div>
    <div class="scroll">108</div>
    <div class="scroll">109</div>
    <div class="scroll">110</div>
    <div class="scroll">111</div>
    <div class="scroll">112</div>
    <div class="scroll">113</div>
    <div class="scroll">114</div>
    <div class="scroll">115</div>
    <div class="scroll">116</div>
    <div class="scroll">117</div>
    <div class="scroll">118</div>
    <div class="scroll">119</div>
    <div class="scroll">120</div>
    <div class="scroll">121</div>
    <div class="scroll">122</div>
    <div class="scroll">123</div>
    <div class="scroll">124</div>
    <div class="scroll">125</div>
    <div class="scroll">126</div>
    <div class="scroll">127</div>
    <div class="scroll">128</div>
    <div class="scroll">129</div>
    <div class="scroll">130</div>
    <div class="scroll">131</div>
    <div class="scroll">132</div>
    <div class="scroll">133</div>
    <div class="scroll">134</div>
    <div class="scroll">135</div>
    <div class="scroll">136</div>
    <div class="scroll">137</div>
    <div class="scroll">138</div>
    <div class="scroll">139</div>
    <div class="scroll">140</div>
    <div class="scroll">141</div>
    <div class="scroll">142</div>
    <div class="scroll">143</div>
    <div class="scroll">144</div>
    <div class="scroll">145</div>
    <div class="scroll">146</div>
    <div class="scroll">147</div>
    <div class="scroll">148</div>
    <div class="scroll">149</div>
    <div class="scroll">150</div>
    <div class="scroll">151</div>
    <div class="scroll">152</div>
    <div class="scroll">153</div>
    <div class="scroll">154</div>
    <div class="scroll">155</div>
    <div class="scroll">156</div>
    <div class="scroll">157</div>
    <div class="scroll">158</div>
    <div class="scroll">159</div>
    <div class="scroll">160</div>
    <div class="scroll">161</div>
    <div class="scroll">162</div>
    <div class="scroll">163</div>
    <div class="scroll">164</div>
    <div class="scroll">165</div>
    <div class="scroll">166</div>
    <div class="scroll">167</div>
    <div class="scroll">168</div>
    <div class="scroll">169</div>
    <div class="scroll">170</div>
    <div class="scroll">171</div>
    <div class="scroll">172</div>
    <div class="scroll">173</div>
    <div class="scroll">174</div>
    <div class="scroll">175</div>
    <div class="scroll">176</div>
    <div class="scroll">177</div>
    <div class="scroll">178</div>
    <div class="scroll">179</div>
    <div class="scroll">180</div>
    <div class="scroll">181</div>
    <div class="scroll">182</div>
    <div class="scroll">183</div>
    <div class="scroll">184</div>
    <div class="scroll">185</div>
    <div class="scroll">186</div>
    <div class="scroll">187</div>
    <div class="scroll">188</div>
    <div class="scroll">189</div>
    <div class="scroll">190</div>
    <div class="scroll">191</div>
    <div class="scroll">192</div>
    <div class="scroll">193</div>
    <div class="scroll">194</div>
    <div class="scroll">195</div>
    <div class="scroll">196</div>
    <div class="scroll">197</div>
    <div class="scroll">198</div>
    <div class="scroll">199</div>
    <div class="scroll">200</div>
    <div class="scroll">201</div>
    <div class="scroll">202</div>
    <div class="scroll">203</div>
    <div class="scroll">204</div>
    <div class="scroll">205</div>
    <div class="scroll">206</div>
    <div class="scroll">207</div>
    <div class="scroll">208</div>
    <div class="scroll">209</div>
    <div class="scroll">210</div>
    <div class="scroll">211</div>
    <div class="scroll">212</div>
    <div class="scroll">213</div>
    <div class="scroll">214</div>
    <div class="scroll">215</div>
    <div class="scroll">216</div>
    <div class="scroll">217</div>
    <div class="scroll">218</div>
    <div class="scroll">219</div>
    <div class="scroll">220</div>
    <div class="scroll">221</div>
    <div class="scroll">222</div>
    <div class="scroll">223</div>
    <div class="scroll">224</div>
    <div class="scroll">225</div>
    <div class="scroll">226</div>
    <div class="scroll">227</div>
    <div class="scroll">228</div>
    <div class="scroll">229</div>
    <div class="scroll">230</div>
    <div class="scroll">231</div>
    <div class="scroll">232</div>
    <div class="scroll">233</div>
    <div class="scroll">234</div>
    <div class="scroll">235</div>
    <div class="scroll">236</div>
    <div class="scroll">237</div>
    <div class="scroll">238</div>
    <div class="scroll">239</div>
    <div class="scroll">240</div>
    <div class="scroll">241</div>
    <div class="scroll">242</div>
    <div class="scroll">243</div>
    <div class="scroll">244</div>
    <div class="scroll">245</div>
    <div class="scroll">246</div>
    <div class="scroll">247</div>
    <div class="scroll">248</div>
    <div class="scroll">249</div>
    <div class="scroll">250</div>
    <div class="scroll">251</div>
    <div class="scroll">252</div>
    <div class="scroll">253</div>
    <div class="scroll">254</div>
    <div class="scroll">255</div>
    <div class="scroll">256</div>
    <div class="scroll">257</div>
    <div class="scroll">258</div>
    <div class="scroll">259</div>
    <div class="scroll">260</div>
    <div class="scroll">261</div>
    <div class="scroll">262</div>
    <div class="scroll">263</div>
    <div class="scroll">264</div>
    <div class="scroll">265</div>
    <div class="scroll">266</div>
    <div class="scroll">267</div>
    <div class="scroll">268</div>
    <div class="scroll">269</div>
    <div class="scroll">270</div>
    <div class="scroll">271</div>
    <div class="scroll">272</div>
    <div class="scroll">273</div>
    <div class="scroll">274</div>
    <div class="scroll">275</div>
    <div class="scroll">276</div>
    <div class="scroll">277</div>
    <div class="scroll">278</div>
    <div class="scroll">279</div>
    <div class="scroll">280</div>
    <div class="scroll">281</div>
    <div class="scroll">282</div>
    <div class="scroll">283</div>
    <div class="scroll">284</div>
    <div class="scroll">285</div>
    <div class="scroll">286</div>
    <div class="scroll">287</div>
    <div class="scroll">288</div>
    <div class="scroll">289</div>
    <div class="scroll">290</div>
    <div class="scroll">291</div>
    <div class="scroll">292</div>
    <div class="scroll">293</div>
    <div class="scroll">294</div>
    <div class="scroll">295</div>
    <div class="scroll">296</div>
    <div class="scroll">297</div>
    <div class="scroll">298</div>
    <div class="scroll">299</div>
    <div class="scroll">300</div>
    <div class="scroll">301</div>
    <div class="scroll">302</div>
    <div class="scroll">303</div>
    <div class="scroll">304</div>
    <div class="scroll">305</div>
    <div class="scroll">306</div>
    <div class="scroll">307</div>
    <div class="scroll">308</div>
    <div class="scroll">309</div>
    <div class="scroll">310</div>
    <div class="scroll">311</div>
    <div class="scroll">312</div>
    <div class="scroll">313</div>
    <div class="scroll">314</div>
    <div class="scroll">315</div>
    <div class="scroll">316</div>
    <div class="scroll">317</div>
    <div class="scroll">318</div>
    <div class="scroll">319</div>
    <div class="scroll">320</div>
    <div class="scroll">321</div>
    <div class="scroll">322</div>
    <div class="scroll">323</div>
    <div class="scroll">324</div>
    <div class="scroll">325</div>
    <div class="scroll">326</div>
    <div class="scroll">327</div>
    <div class="scroll">328</div>
    <div class="scroll">329</div>
    <div class="scroll">330</div>
    <div class="scroll">331</div>
    <div class="scroll">332</div>
    <div class="scroll">333</div>
    <div class="scroll">334</div>
    <div class="scroll">335</div>
    <div class="scroll">336</div>
    <div class="scroll">337</div>
    <div class="scroll">338</div>
    <div class="scroll">339</div>
    <div class="scroll">340</div>
    <div class="scroll">341</div>
    <div class="scroll">342</div>
    <div class="scroll">343</div>
    <div class="scroll">344</div>
    <div class="scroll">345</div>
    <div class="scroll">346</div>
    <div class="scroll">347</div>
    <div class="scroll">348</div>
    <div class="scroll">349</div>
    <div class="scroll">350</div>
    <div class="scroll">351</div>
    <div class="scroll">352</div>
    <div class="scroll">353</div>
    <div class="scroll">354</div>
    <div class="scroll">355</div>
    <div class="scroll">356</div>
    <div class="scroll">357</div>
    <div class="scroll">358</div>
    <div class="scroll">359</div>
    <div class="scroll">360</div>
    <div class="scroll">361</div>
    <div class="scroll">362</div>
    <div class="scroll">363</div>
    <div class="scroll">364</div>
    <div class="scroll">365</div>
    <div class="scroll">366</div>
    <div class="scroll">367</div>
    <div class="scroll">368</div>
    <div class="scroll">369</div>
    <div class="scroll">370</div>
    <div class="scroll">371</div>
    <div class="scroll">372</div>
    <div class="scroll">373</div>
    <div class="scroll">374</div>
    <div class="scroll">375</div>
    <div class="scroll">376</div>
    <div class="scroll">377</div>
    <div class="scroll">378</div>
    <div class="scroll">379</div>
    <div class="scroll">380</div>
    <div class="scroll">381</div>
    <div class="scroll">382</div>
    <div class="scroll">383</div>
    <div class="scroll">384</div>
    <div class="scroll">385</div>
    <div class="scroll">386</div>
    <div class="scroll">387</div>
    <div class="scroll">388</div>
    <div class="scroll">389</div>
    <div class="scroll">390</div>
    <div class="scroll">391</div>
    <div class="scroll">392</div>
    <div class="scroll">393</div>
    <div class="scroll">394</div>
    <div class="scroll">395</div>
    <div class="scroll">396</div>
    <div class="scroll">397</div>
    <div class="scroll">398</div>
    <div class="scroll">399</div>
    <div class="scroll">400</div>
    <div class="scroll">401</div>
    <div class="scroll">402</div>
    <div class="scroll">403</div>
    <div class="scroll">404</div>
    <div class="scroll">405</div>
    <div class="scroll">406</div>
    <div class="scroll">407</div>
    <div class="scroll">408</div>
    <div class="scroll">409</div>
    <div class="scroll">410</div>
    <div class="scroll">411</div>
    <div class="scroll">412</div>
    <div class="scroll">413</div>
    <div class="scroll">414</div>
    <div class="scroll">415</div>
    <div class="scroll">416</div>
    <div class="scroll">417</div>
    <div class="scroll">418</div>
    <div class="scroll">419</div>
    <div class="scroll">420</div>
    <div class="scroll">421</div>
    <div class="scroll">422</div>
    <div class="scroll">423</div>
    <div class="scroll">424</div>
    <div class="scroll">425</div>
    <div class="scroll">426</div>
    <div class="scroll">427</div>
    <div class="scroll">428</div>
    <div class="scroll">429</div>
    <div class="scroll">430</div>
    <div class="scroll">431</div>
    <div class="scroll">432</div>
    <div class="scroll">433</div>
    <div class="scroll">434</div>
    <div class="scroll">435</div>
    <div class="scroll">436</div>
    <div class="scroll">437</div>
    <div class="scroll">438</div>
    <div class="scroll">439</div>
    <div class="scroll">440</div>
    <div class="scroll">441</div>
    <div class="scroll">442</div>
    <div class="scroll">443</div>
    <div class="scroll">444</div>
    <div class="scroll">445</div>
    <div class="scroll">446</div>
    <div class="scroll">447</div>
    <div class="scroll">448</div>
    <div class="scroll">449</div>
    <div class="scroll">450</div>
    <div class="scroll">451</div>
    <div class="scroll">452</div>
    <div class="scroll">453</div>
    <div class="scroll">454</div>
    <div class="scroll">455</div>
    <div class="scroll">456</div>
    <div class="scroll">457</div>
    <div class="scroll">458</div>
    <div class="scroll">459</div>
    <div class="scroll">460</div>
    <div class="scroll">461</div>
    <div class="scroll">462</div>
    <div class="scroll">463</div>
    <div class="scroll">464</div>
    <div class="scroll">465</div>
    <div class="scroll">466</div>
    <div class="scroll">467</div>
    <div class="scroll">468</div>
    <div class="scroll">469</div>
    <div class="scroll">470</div>
    <div class="scroll">471</div>
    <div class="scroll">472</div>
    <div class="scroll">473</div>
    <div class="scroll">474</div>
    <div class="scroll">475</div>
    <div class="scroll">476</div>
    <div class="scroll">477</div>
    <div class="scroll">478</div>
    <div class="scroll">479</div>
    <div class="scroll">480</div>
    <div class="scroll">481</div>
    <div class="scroll">482</div>
    <div class="scroll">483</div>
    <div class="scroll">484</div>
    <div class="scroll">485</div>
    <div class="scroll">486</div>
    <div class="scroll">487</div>
    <div class="scroll">488</div>
    <div class="scroll">489</div>
    <div class="scroll">490</div>
    <div class="scroll">491</div>
    <div class="scroll">492</div>
    <div class="scroll">493</div>
    <div class="scroll">494</div>
    <div class="scroll">495</div>
    <div class="scroll">496</div>
    <div class="scroll">497</div>
    <div class="scroll">498</div>
    <div class="scroll">499</div>
    <div class="scroll">500</div>
</body>
<style>
   .top{
    width: 100%;
    height: 50px;
    border: 4px;
    background-color: pink;
    position: fixed;
   }
   .bottom{
    width: 100%;
    height: 50px ;
    background-color: pink;
    position: fixed;
    bottom: 2em;
   }
   .left{
    height: 80%;
    width: 80px;
    background-color: rgb(130, 219, 130);
    position: fixed;
    left: 0em;
    bottom: 6.5rem;
   }
   .right{
    height: 80%;
    width: 80px;
    right: 0em;
    background-color: rgb(130, 219, 130);
    position: fixed;
    bottom: 6.5rem;
   }
   .scroll{
    width: 50px;
    margin: auto;
   }
</style>
</html>